<div class="thumbnail">
  <img src="http://placehold.it/820x230">
  <div>
    <h4 class="pull-right">{{product?.price}}</h4>
    <h4>{{product?.title}}</h4>
    <h4>{{product?.desc}}</h4>
  </div>
  <div>
    <p *ngIf="comments?.length==0" class="pull-right">暂无评论</p>
    <p *ngIf="comments?.length!=0" class="pull-right">共{{comments?.length}}条评论</p>
    <p>
      <app-stars [rating]="product?.rating"></app-stars>
    </p>
  </div>
</div>
<div class="thumbnail">
  <button class="btn btn-default btn-lg"
          [class.active]="isWatched"
          (click)="watchProduct()"
          >
    {{isWatched?'取消关注':'关注'}}
  </button>
  <label>最新出价{{currentBid | number:'2.2-2'}}</label>
</div>
<div class="well">
  <div>
    <button class="btn btn-success" (click)="isCommentHidden = !isCommentHidden">发表评论</button>
  </div>
  <div [hidden]="isCommentHidden">
    <div><app-stars [readonly]="false" [(rating)]="newRating"></app-stars></div>
    <div>
      <textarea [(ngModel)]="newComment"></textarea>
    </div>
    <div>
      <button class="btn" (click)="addComment()">提交</button>
    </div>
  </div>
  <div class="row" *ngFor="let comment of comments">
    <hr>
    <div class="col-md-12">
      <app-stars [rating]="comment.rating"></app-stars>
      <span>{{comment.user}}</span>
      <span class="pull-right">{{comment.timestamp}}</span>
      <p></p>
      <p>{{comment.content}}</p>
    </div>
  </div>
</div>
